<template>
  <div class="pay">
    <Header />
    <div class="pay-content">
      <!-- 头部大标题 -->
      <div class="pay-content-title">{{ $route.meta.title }}</div>
      <div class="pay-content-address">
        <div class="pay-content-address-left">
          <!-- 步骤条 -->
          <div class="pay-content-address-left-step">
            <div class="pay-content-address-left-step-item">
              <div class="pay-content-address-left-step-item-cube">
                <el-icon size="22" color="white">
                  <OfficeBuilding />
                </el-icon>
                <div class="pay-content-address-left-step-item-text">地址</div>
              </div>
            </div>
            <div :style="`opacity: ${ $route.meta.line1 ? '1' : '0' };`" class="pay-content-address-left-step-item-line"></div>
            <div class="pay-content-address-left-step-item">
              <div :style="`background-color: ${ $route.meta.cube2 ? 'rgb(8, 131, 149)' : 'rgba(163, 170, 171, 0.1)' };`" class="pay-content-address-left-step-item-cube">
                <el-icon size="22" :color="$route.meta.cube2 ?  'white' : 'rgb(20, 28, 29)'">
                  <Wallet />
                </el-icon>
                <div class="pay-content-address-left-step-item-text">支付方式</div>
              </div>
            </div>
            <div :style="`opacity: ${ $route.meta.line2 ? '1' : '0' };`" class="pay-content-address-left-step-item-line"></div>
            <div class="pay-content-address-left-step-item">
              <div :style="`background-color: ${ $route.meta.cube3 ? 'rgb(8, 131, 149)' : 'rgba(163, 170, 171, 0.1)' };`" class="pay-content-address-left-step-item-cube">
                <el-icon size="22" :color="$route.meta.cube3 ?  'white' : 'rgb(20, 28, 29)'">
                  <Document />
                </el-icon>
                <div class="pay-content-address-left-step-item-text">支付确认</div>
              </div>
            </div>
          </div>
          <RouterView />
        </div>
        <div class="pay-content-address-right">
          <div class="checkout-table-cube">
            <div class="checkout-table-cube-total">
              <div>商品总价</div>
              <div>{{ `￥${ (550).toFixed(2) }` }}</div>
            </div>
            <div class="checkout-table-cube-discount">
              <div class="checkout-table-cube-discount-up">折扣码</div>
              <div class="checkout-table-cube-discount-down">
                <div class="checkout-table-cube-discount-down-left">
                  <input maxlength="6" v-model="discount" type="text" disabled placeholder="已禁止输入">
                </div>
                <div class="checkout-table-cube-discount-down-right">打折</div>
              </div>
            </div>
            <div class="checkout-table-cube-delivery">
              <div>运费</div>
              <div>{{ `￥${ (0).toFixed(2) }` }}</div>
            </div>
            <div class="checkout-table-cube-total2">
              <div>合计</div>
              <div>{{ `￥${ (550).toFixed(2) }` }}</div>
            </div>
            <div @click="toPayPage" :style="`display: ${ $route.meta.btn ? 'flex' : 'none' };`" class="checkout-table-cube-pay">{{ $route.meta.text }}</div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import emiter from '@/bus';
import { ref } from 'vue'

// 折扣码
const discount = ref('')

const toPayPage = () => {
  // 跳转到支付界面
  emiter.emit('toPayPage')
}
</script>

<style lang="less" scoped>
.pay {
  .pay-content {
    width: 70%;
    margin: auto;
    font-family: 'Helvetica';

    .pay-content-title {
      margin: 50px 0;
      color: rgb(20, 28, 29);
      font-size: 40px;
      font-weight: 700;
    }

    .pay-content-address {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 100px;

      .pay-content-address-left {
        width: 65%;

        .pay-content-address-left-step {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 70px;

          .pay-content-address-left-step-item {
            .pay-content-address-left-step-item-cube {
              width: 50px;
              height: 50px;
              border-radius: 8px;
              background-color: rgb(8, 131, 149);
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;

              .pay-content-address-left-step-item-text {
                width: 80px;
                text-align: center;
                position: absolute;
                bottom: -30px;

                color: rgb(20, 28, 29);
                font-size: 16px;
                font-weight: 400;
              }
            }
          }

          .pay-content-address-left-step-item-line {
            width: 38%;
            height: 1px;
            border-bottom: 1px dashed rgb(8, 131, 149);
          }
        }
      }

      .pay-content-address-right {
        width: 360px;

        .checkout-table-cube {
          width: 360px;
          // height: 337px;

          border-radius: 20px;
          box-shadow: 0px 55px 110px 0px rgba(0, 0, 0, 0.04),0px 55px 110px 0px rgba(0, 0, 0, 0.05);
          background: rgb(255, 255, 255);

          box-sizing: border-box;
          padding: 20px;

          .checkout-table-cube-total {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 0 18px;
            border-bottom: 1px solid rgba(163, 170, 171, 0.2);
            color: rgb(20, 28, 29);
            font-size: 15px;
            font-weight: 700;
          }

          .checkout-table-cube-discount {
            margin: 18px 0;

            .checkout-table-cube-discount-up {
              color: rgb(20, 28, 29);
              font-family: Epilogue;
              font-size: 12px;
              font-weight: 400;
              margin-bottom: 8px;
            }

            .checkout-table-cube-discount-down {
              display: flex;
              width: 100%;

              .checkout-table-cube-discount-down-left {
                width: 70%;
                height: 48px;

                input {
                  width: 100%;
                  height: 100%;
                  
                  box-sizing: border-box;
                  border: 1px solid rgba(163, 170, 171, 0.2);
                  border-radius: 10px 0 0 10px;
                  padding: 0 15px;
                  outline: none;
                  font-size: 15px;
                  cursor: not-allowed;
                }
              }

              .checkout-table-cube-discount-down-right {
                width: 30%;
                height: 48px;
                box-sizing: border-box;
                border-radius: 0 10px 10px 0;
                background-color: rgb(22, 162, 184);
                display: flex;
                align-items: center;
                justify-content: center;

                color: rgb(255, 255, 255);
                font-size: 15px;
                font-weight: 400;
                cursor: not-allowed;
              }
            }
          }
            
          .checkout-table-cube-delivery {
            width: 100%;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(163, 170, 171, 0.2);
            color: rgb(20, 28, 29);
            font-size: 15px;
            font-weight: 400;
          }
          
          .checkout-table-cube-total2 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            color: rgb(20, 28, 29);
            font-size: 15px;
            font-weight: 700;
            margin-top: 16px;
          }
          
          .checkout-table-cube-pay {
            margin-top: 30px;

            width: 100%;
            height: 48px;
            border-radius: 10px;
            background: rgb(8, 131, 149);

            display: flex;
            justify-content: center;
            align-items: center;

            color: rgb(255, 255, 255);
            font-size: 16px;
            font-weight: 400;

            cursor: pointer;

            transition: background 0.4s;
          }

          .checkout-table-cube-pay:hover {
            background: rgb(22, 162, 184);
          }
        }
      }
    }
  }
}
</style>